<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>首页</title>
<link th:href="@{/c/base.css}" rel="stylesheet" type="text/css">
<link th:href="@{/c/toefl.css}" rel="stylesheet" type="text/css">
<link rel="stylesheet" th:href="@{/c/bootstrap.min.css}">
<script type="text/javascript" th:src="@{/static/j/jquery-2.1.0.js}"></script>
<script th:src="@{/j/bootstrap.min.js}"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
#flash{
width: 850px;
height: 330px;
position: relative;
margin: 0 auto;
border:1px solid black;
overflow: hidden;
}
#falsh img{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#flash ul{
position: absolute;
left: 40%;
bottom: 5%;
width: 200px;
height: 30px;
border-radius: 20px;
background-color: rgba(0,0,0,0.5);
}
#flash ul li{
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #fff;
margin-left: 20px;
margin-top: 7px;
}
#flash ul .li_first{
background-color: #ff4400;
}
#flash .button{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0,0,0,0.3);
cursor: pointer;
}
#flash .right{
position: absolute;
right: 10px;
top:45%;
}
#flash .left{
position: absolute;
left: 10px;
top: 45%;
}
#flash .button span{
font-size: xx-large;
font-weight: 700;
line-height: 50px;
margin-left: 15px;
color: rgba(255,255,255,0.5);
}
</style>
</head>

<body>
<!--头-->
<div class="doc1180">
    <div class="header">
        <div class="logo"><a href="####"><img th:src="@{/i/logo.png}"></a></div>
        <div class="headerLink">
            <a th:href="@{/toLogin}" class="###">登录</a>
            <a th:href="@{/toRegister}" class="###">注册</a>
        </div>
    </div>
</div>
<div class="menu">
<<<<<<< HEAD
    <div class="doc1180">
        <div class="menuLink">
            <ul class="fn-clear">
                <li class="active"><a th:href="@{/index}" >首页</a>
                <li><a th:href="@{/tfPerson}" >托福人</a>
                <li><a th:href="@{/pubCourse}" >公开课</a>
                <li><a th:href="@{/toChat}" >群组聊</a>
                <li><a th:href="@{/welare}">福利城堡</a>
            </ul>
        </div>
        <div class="headerUser">
            <ul>
                <li class="headerUserPic"><img src="../i/hlw.png">

                <li class="headerUserName"><a th:href="@{/mydata}" target="ifr">用户名</a>
                <li class="headerUserNotice">通知<a href="###">14</a>
=======
	<div class="doc1180">
   	  <div class="menuLink">
        	<ul class="fn-clear">
<<<<<<< HEAD
            	<li class="active"><a href="index.html" >首页</a></li>
                <li><a href="用户/托福人.html" >托福人</a></li>
                <li><a th:href="@{/pubCourse}" >公开课</a></li>
                <li><a th:href="@{/toChat}" >群组聊</a></li>
                <li><a href="user/福利城堡-福利城堡.html">福利城堡</a></li>
=======
                    <li class="active"><a th:href="@{/index}" >首页</a></li>
                    <li><a th:href="@{/tfPerson}" >托福人</a></li>
                    <li><a th:href="@{/pubCourse}" >公开课</a></li>
                    <li><a th:href="@{/toChat}" >群组聊</a></li>
                    <li><a th:href="@{/welare}">福利城堡</a></li>
>>>>>>> de7ea899210850f410696990fecdc7a7fe9cc7bc
            </ul>
        </div>
        <div class="headerUser">
        	<ul>
<<<<<<< HEAD
            	<li class="headerUserPic"><a href="###"><img src="../i/hlw.png"></a></li>
                <li class="headerUserName"><a href="user/个人中心个人资料.html" target="ifr">用户名</a></li>
                <li class="headerUserName"><a href="../my/mydata.html" target="ifr">用户名</a></li>
                <li class="headerUserName"><a href="用户/个人中心个人资料.html" target="ifr">用户名</a></li>
=======
            	<li class="headerUserPic"><img src="../i/hlw.png"></li>

                <li class="headerUserName"><a th:href="@{/mydata}" target="ifr">用户名</a></li>
>>>>>>> de7ea899210850f410696990fecdc7a7fe9cc7bc
                <li class="headerUserNotice">通知<a href="###">14</a></li>
>>>>>>> 02024db92117f87b0413944e11f07adda05202af
            </ul>
        </div>
    </div>
</div>
<!--头-->
<div class="doc1180 paddingT20 fn-clear">
	<!--页面左侧内容-->
  <div class="doc850 fn-left">
    	<div class="ppt">
        <!-- 代码 开始 -->
   <div id="flash">
<img src="../i/1.jpg" alt="" style="display: block">
<img src="../i/1.jpg" alt="">
<img src="../i/1.jpg" alt="">
<img src="../i/1.jpg" alt="">
<img src="../i/1.jpg" alt="">
<ul>
<li class="li_first"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="button right"><img src="../i/right.png" width="49" height="51"></div>
<div class="button left"><img src="../i/left.png" width="49" height="51"></div>
</div>
<!-- 代码 结束 -->
        
        </div>
        <div class="toefl_tuijian" th:each="article:${articleList}">
       	  <div class="toefl_h3">最新发布</div>
            <dl class="toefl_dl">
				<dt><img th:src="@{/i/1(400x240).jpg}" width="400" height="240"></dt>
                <dd>
                	<div class="toefl_title">
                    	<a th:href="@{/tfPersonDetail(articleId=${article.getArticleId()})}"><h4 th:text="${article.getTitle()}">大神说｜ G&T 双管齐下，看他如何斩获 CMU 王牌专业 offer！</h4></a>
                        <a class="toefl_anniu" href="#" th:text="${article.getType()}">托福口语</a>
                    </div>
                    <div class="toefl_indexExcerpt" th:text="${article.getContent()}">托福君知道，在申请研究生这条路上，很多人都有换个专业试试的想法。今天就给大家介绍一位成功从商科转工科的大神——吴楚同学，他借助托福®考试和 GRE® 普通考试，顺利拿到卡耐基梅隆大学信息系统管理专业的 offer。值得一提的是，在备考过程中，吴楚同学更是让自己的托福成绩在大约半年的时间里提高了 20 分！
下面是他关于如何备考、申请经验、在读感受的详细解答，或许他的学习历程能给你带来些许启发，或许看完他的故事你会立刻让梦想付诸行动哦！</div>
                    <div class="toefl_indexTime" th:text="${#dates.format(article.getTime(), 'yyyy-M月-d日')}">2014-12-29</div>
                </dd>
            </dl>
        </div>
  </div>
  <!--页面左侧内容 end-->
  <!--页面右侧内容-->
  <div class="doc280 fn-right">
    <!--热门小组-->
    <div class="index_itemR">
    	<div class="index_itemRtitle">
        	<h3>热门小组</h3>
            <a href="#" class="index_itemRMore">换一换</a>
      	</div>
        <div class="index_itemRHot">
        	<dl>
            	<dt><a href="user/chat.html"><img src="../i/xz1.png" width="48" height="48"></a></dt>
                <dd>
                	<div class="fn-clear">
						<span class="index_itemRHotName"><a href="user/chat.html">标题请控制字数</a></span>
                        <span class="index_itemRHotPic"><img src="../i/index_itemRHot.png" ></span>
                        <span class="index_itemRHotNum">234567人加入</span>
                    </div>
                    <div class="index_itemRHotText">简介请控制字数</div>
                </dd>
            </dl>
            <dl>
            	<dt><a href="user/chat.html"><img src="../i/xz2.png" width="48" height="48"></a></dt>
                <dd>
                	<div class="fn-clear">
						<span class="index_itemRHotName"><a href="user/chat.html">你不做作就不会死</a></span>
                        <span class="index_itemRHotPic"><img src="../i/index_itemRHot.png" ></span>
                        <span class="index_itemRHotNum">234567人加入</span>
                    </div>
                    <div class="index_itemRHotText">你不做作就不会死你不做作就不会死你不做作就不会死</div>
                </dd>
            </dl>
            <dl>
				<dt><a href="user/chat.html"><img src="../i/xz3.png" width="48" height="48"></a></dt>
                <dd>
                	<div class="fn-clear">
						<span class="index_itemRHotName"><a href="user/chat.html">你不做作就不会死</a></span>
                        <span class="index_itemRHotPic"><img src="../i/index_itemRHot.png" ></span>
                        <span class="index_itemRHotNum">234567人加入</span>
                    </div>
                    <div class="index_itemRHotText">你不做作就不会死你不做作就不会死你不做作就不会死</div>
                </dd>
            </dl>
        </div>
        
    </div>
    <!--最新公开课-->
    <div class="index_itemR">
    	<div class="index_itemRtitle">
        	<h3>最新公开课</h3>
            <a href="#" class="index_itemRMore">更多</a>
      	</div>
        <div class="index_itemROpen">
        	<dl>
            	<dt class="now">
                	<div class="index_itemROpenM">十二月</div>
                    <div class="index_itemROpenD">28</div>
                </dt>
                <dd>
                	<div class="index_itemROpenTitle"><a href="user/公开课首页.html">标题请控制字数234567人简介请控制字数加入人简介请控制字数加入</a></div>
                    <div class="index_itemROpenText">
                    	<span>17:30-21:00</span>
                        <span>主讲：公开来看</span>
                    </div>
                </dd>
            </dl>
            <dl>
            	<dt>
                	<div class="index_itemROpenM">十二月</div>
                    <div class="index_itemROpenD">28</div>
                </dt>
                <dd>
                	<div class="index_itemROpenTitle"><a href="user/公开课首页.html">标题请控制字数234567人简介请控制字数加入人简介请控制字数加入</a></div>
                    <div class="index_itemROpenText">
                    	<span>17:30-21:00</span>
                        <span>主讲：公开来看</span>
                    </div>
                </dd>
            </dl>
            <dl>
            	<dt>
                	<div class="index_itemROpenM">十二月</div>
                    <div class="index_itemROpenD">28</div>
                </dt>
                <dd>
                	<div class="index_itemROpenTitle"><a href="user/公开课首页.html">标题请控制字数234567人简介请控制字数加入人简介请控制字数加入</a></div>
                    <div class="index_itemROpenText">
                    	<span>17:30-21:00</span>
                        <span>主讲：公开来看</span>
                    </div>
                </dd>
            </dl>
        </div>
        
    </div>
    <!--
    <div class="index_itemR">
    	<div class="index_itemRtitle">
        	<h3>热门活动</h3>
            <a href="#" class="index_itemRMore">更多</a>
      	</div>
        <div class="index_Active">
        	<dl>
            	<dt class="now"><a href="福利城堡-福利城堡.html"><img src="../i/125x80.png"></a></dt>
                <dd>
                	<div class="index_ActiveTitle"><a href="福利城堡-福利城堡.html">标题请控制字</a></div>
                    <div class="index_ActiveNum">234567人参加</div>
                    <a href="#" class="index_ActiveB">我要参见</a>
                </dd>
            </dl>
            <dl>
				<dt class="now"><a href="福利城堡-福利城堡.html"><img src="../i/125x80.png"></a></dt>
                <dd>
                	<div class="index_ActiveTitle"><a href="福利城堡-福利城堡.html">标题请控制字</a></div>
                    <div class="index_ActiveNum">234567人参加</div>
                    <a href="#" class="index_ActiveB">我要参见</a>
                </dd>
            </dl>
            <dl>
            	<dt class="now"><a href="福利城堡-福利城堡.html"><img src="../i/125x80.png"></a></dt>
                <dd>
                	<div class="index_ActiveTitle"><a href="福利城堡-福利城堡.html">标题请控制字</a></div>
                    <div class="index_ActiveNum">234567人参加</div>
                    <a href="#" class="index_ActiveB">我要参见</a>
                </dd>
            </dl>
        </div>
    </div>热门活动-->
    <!--作业专区-->
    
    
    
    
    <!--名师推荐-->
    <div class="index_itemR">
    	<div class="index_itemRtitle">
        	<h3>名师推荐</h3>
            <a href="###" class="index_itemRMore">更多</a>
      	</div>
        <div class="index_itemRLaoshi">
        	<dl>
            	<dt><img src="../i/48x48.png"></dt>
                <dd>
                	<div class="index_itemRLaoshiTitle"><a href="user/名师推荐.html">老师名字</a></div>
                    <div class="index_itemRLaoshiText"><a href="user/名师推荐.html">这里是老师介绍，控制字数控制显示的字数控制字数控制显示的字数控制字数控制显示的字数</a></div>
                </dd>
            </dl>
            <dl>
            	<dt><img src="../i/48x48.png"></dt>
                <dd>
                	<div class="index_itemRLaoshiTitle"><a href="user/名师推荐.html">老师名字</a></div>
                    <div class="index_itemRLaoshiText"><a href="user/名师推荐.html">这里是老师介绍，控制字数控制显示的字数控制字数控制显示的字数控制字数控制显示的字数</a></div>
                </dd>
            </dl>
            <dl>
            	<dt><img src="../i/48x48.png"></dt>
                <dd>
                	<div class="index_itemRLaoshiTitle"><a href="user/名师推荐.html">老师名字</a></div>
                    <div class="index_itemRLaoshiText"><a href="user/名师推荐.html">这里是老师介绍，控制字数控制显示的字数控制字数控制显示的字数控制字数控制显示的字数</a></div>
                </dd>
            </dl>
            <dl>
            	<dt><img src="../i/48x48.png"></dt>
                <dd>
                	<div class="index_itemRLaoshiTitle"><a href="user/名师推荐.html">老师名字</a></div>
                    <div class="index_itemRLaoshiText"><a href="user/名师推荐.html">这里是老师介绍，控制字数控制显示的字数控制字数控制显示的字数控制字数控制显示的字数</a></div>
                </dd>
            </dl>
        </div>
    </div>
  </div>
  <!--页面右侧内容 end-->
  
</div>

<!-- 代码结束 -->

<div class="flink">
	<div class="flinkTop"></div>
    <div class="flinkBody">
    	<h3>友情链接</h3>
        <ul>
        	<li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
        </ul>
    </div>
</div>
<div class="footer">
	<div class="doc1180">
    	<div class="footerLink">
        	<a href="###">人人托福</a>|
            <a href="###">联系我们</a>|
            <a href="###">招聘信息</a>|
            <a href="###">合作媒体</a>|
            <a href="###">意见反馈</a>|
            <a href="###">版权说明</a>
        </div>
        <div class="footerTxet">©2014 – xuanke.com All rights reserved. 京ICP备14022672号-1</div>
    </div>
</div>

<!-- 代码结束 -->





<script>
var count = 0 ; //定义全局变量count来表示当前图片
function run(){
count++;
count = count ==5?0:count;
$('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300); //利用eq来遍历img，并将count位图片显示，其他兄弟元素隐藏，fadeIN位淡入显示，fadeOut为淡出
$('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff'); //同样利用遍历改变圆点的背景色
}
function reverserun(){
count--;
count = count == -1?4:count;
$('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300);
$('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff');
}
var timer = setInterval(run,2000); //设置定时器
$('#flash').hover(function(){ //设置鼠标移入移出事件
clearInterval(timer);
},function(){
timer = setInterval(run,2000);
})
$('#flash ul li').mouseenter(function(){ //设置移入圆点事件
count = $(this).index();
count = count ==5?0:count;
$('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300);
$('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff');
})
$('#flash .right').click(function(){ //设置右键按钮点击事件
run();
})
$('#flash .left').click(function(){ //设置左键按钮点击事件
reverserun();
})
</script>
<!-- 代码结束 -->
</body>
</html>
